<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<script src="js/vue.min.js"></script>
		<script src="js/axios.min.js"></script>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<style>
			.right {
				float: right;
				margin-right: 20px;
				display: none;
			}
			
			#tabbar-with-chat .inp-check {
				display: none;
			}
			
			#tabbar-with-chat .inp-label {
				padding-left: 0;
			}
			
			#button-list {
				z-index: 999;
				background-color: rgba(255, 255, 255, 0);
				width: 354px;
				position: fixed;
				bottom: 5px;
				display: none;
			}
			
			#move-btn {
				float: left;
			}
			
			#del-btn {
				float: right;
			}
			
			#move-btn svg {
				margin: 8px;
			}
			
			#move-btn,
			#del-btn {
				width: 170px;
				height: 40px;
				background-color: #E2F0FF;
				line-height: 40px;
				flex-flow: column;
			}
			
			.note-list,
			.folder-list {
				padding: 10px 0 10px;
				border-bottom: dashed 1px #CACACD;
				flex-flow: column;
			}
			
			.title-weight {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 10px;
			}
			
			.title {
				margin: 5px 0px 0px 0px;
				color: #6d6d72;
				font-size: 12px;
			}
			
			.summary {
				height: 28px;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" id="back_folder" onClick="javascript :history.back(-1);" style="color: #000;"></a>
			<h1 class="mui-title">分享文件</h1>
			<a class="mui-icon mui-icon-more-filled" href="#popover2" style="color: #000;float: right;" id="menu_folder"></a>
		</header>
		<div class="mui-input-row mui-search">
			<input type="search" class="mui-input-clear" placeholder="搜索" id="inquire">
		</div>
		<!--显示最新的笔记-->
		<div id="newest_note">
		</div>
		<!--文件夹右上角菜单-->
		<div id="popover2" class="mui-popover">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="batch-click">批量编辑
				</li>
				<li class="mui-table-view-cell">新建文件夹
				</li>
				<li class="mui-table-view-cell check-radio">按修改时间
					<svg t="1576747105360" style="display: block;" class="icon right" viewBox="0 0 1433 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" width="16" height="16">
						<path d="M42.530133 606.8224C16.315733 579.584 13.380267 532.753067 35.498667 502.647467L33.5872 505.173333a66.696533 66.696533 0 0 1 94.549333-13.5168l226.645334 173.6704c59.869867 45.8752 154.965333 44.373333 213.128533-4.096L1323.690667 31.402667a76.5952 76.5952 0 0 1 101.034666 4.5056L1406.429867 17.749333a67.037867 67.037867 0 0 1 0.136533 95.8464l-846.506667 833.1264a134.621867 134.621867 0 0 1-191.624533-2.730666L42.530133 606.890667z" p-id="2858" fill="#1296db"></path>
					</svg>
				</li>
				<li class="mui-table-view-cell check-radio">按创建时间
					<svg t="1576747105360" class="icon right" viewBox="0 0 1433 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" width="16" height="16">
						<path d="M42.530133 606.8224C16.315733 579.584 13.380267 532.753067 35.498667 502.647467L33.5872 505.173333a66.696533 66.696533 0 0 1 94.549333-13.5168l226.645334 173.6704c59.869867 45.8752 154.965333 44.373333 213.128533-4.096L1323.690667 31.402667a76.5952 76.5952 0 0 1 101.034666 4.5056L1406.429867 17.749333a67.037867 67.037867 0 0 1 0.136533 95.8464l-846.506667 833.1264a134.621867 134.621867 0 0 1-191.624533-2.730666L42.530133 606.890667z" p-id="2858" fill="#1296db"></path>
					</svg>
				</li>
				<li class="mui-table-view-cell check-radio">按名称排序
					<svg t="1576747105360" class="icon right" viewBox="0 0 1433 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" width="16" height="16">
						<path d="M42.530133 606.8224C16.315733 579.584 13.380267 532.753067 35.498667 502.647467L33.5872 505.173333a66.696533 66.696533 0 0 1 94.549333-13.5168l226.645334 173.6704c59.869867 45.8752 154.965333 44.373333 213.128533-4.096L1323.690667 31.402667a76.5952 76.5952 0 0 1 101.034666 4.5056L1406.429867 17.749333a67.037867 67.037867 0 0 1 0.136533 95.8464l-846.506667 833.1264a134.621867 134.621867 0 0 1-191.624533-2.730666L42.530133 606.890667z" p-id="2858" fill="#1296db"></path>
					</svg>
				</li>
			</ul>
		</div>
		<div id="button-list">
			<ul class="mui-clearfix">
				<li id="move-btn">
					<img src="img/move.png" />
					<span>移动</span>
				</li>
				<li id="del-btn">
					<span>删除</span>
				</li>
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()

			//点击排序方式
			$(".check-radio").click(function() {
				//隐藏弹出框
				alert("aa")
				mui("#popover2").popover('toggle');
				$(".right").hide();
				$(this).find("svg").show();
				alert($(this).index())
				$.ajax({
					type: 'get',
					url: "http://343bdb1.cpolar.io/note-star/sort/sortNotes",
					dataType: 'json',
					data: {
						token: userid,
						type: $(this).index()
					},
					success: function(d) {
						$('#newest_note').html("");
						for(var i = 0; i < d.length; i++) {
						$('#newest_note').append('<div class="note-list" onclick="turnPage(\'' + d[i].id + '\')"><span class="title-weight">' + d[i].notesName + '<div class="summary"><p class="title">' + d[i].content + '</p></div><p class="title">' + d[i].createTime + '</p></div>');
						}
					},
					error: function(xhr, type, errorThrown) {
						alert(type)
					}
				})
			})
			//执行刷新刷新页面
			window.addEventListener('refresh', function(e) {
				location.reload();
			});
			//批量选择
			$("#batch-click").click(function() {
				//隐藏弹出框
				mui("#popover2").popover('toggle');
				//显示复选框
				$(".inp-check").show();
				$(".inp-label").css("padding-left", "58px");
				//取消点击跳转事件
				$(".folder-list").attr("onclick", "");
				$(".note-list").attr("onclick", "");
			})
			var flash = true;
			$('.checkes').click(function() {
				if(flash) {
					$(this).find("svg").show();
					//隐藏弹出框
					mui("#popover2").popover('toggle');
					flash = false;
				} else {
					$(this).find("svg").hide();
					mui("#popover2").popover('toggle');
					flash = true;
				}
			})

			//搜索
			$("#inquire").click(function() {
				mui.openWindow({
					url: 'star_inquire.html',
					//传递的参数
					extras: {
						ids: d,
					}
				})
			})
			//跳转到查看页面的方法
			function turnPage(d) {
				mui.openWindow({
					url: 'show_note.html',
					id: 'show_note',
					//传递的参数
					extras: {
						ids: d,
					}
				})
			}

			var token;
			mui.plusReady(function() {
				token = plus.storage.getItem("accessToken")
				console.log(token)
				alert(token)
				$.ajax({
					type: "post",
					url: "http://343bdb1.cpolar.io/note-notes/notes/getMyshare",
					data: {
						userId: token,
						token: token
					},
					dataType: 'json',
					success: function(d) {
						for(var i = 0; i < d.length; i++) {
						$('#newest_note').append('<div class="note-list" onclick="turnPage(\'' + d[i].id + '\')"><span class="title-weight">' + d[i].notesName + '<div class="summary"><p class="title">' + d[i].content + '</p></div><p class="title">' + d[i].createTime + '</p></div>');
						}
					}
				});
			})
		</script>
	</body>

</html>